var xmlhttp;

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

//show Search result, used for item search
function showResult(str)
{
if (str.length==0)
  {
  document.getElementById("SearchOutput").innerHTML="";
  return;
  }

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("SearchOutput").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ShopSearch.php?q="+str,true);
xmlhttp.send();
}

//submit item search result when user press ENTER key
function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;

if (keycode == 13)
   {
    myfield.form.submit();
   //showResult(myfield);
   return false;
   }
else
   return true;
}

// load item table after loading initial page
$(document).ready(function(){
	$("#item_search_text").keydown(function(key){
		if(key.keyCode == 13){ //if enter key is hit
			if($("#item_search_text").val() != "")
				search_item($("#item_search_text").val());
		}
	});
	$("#item_search_button").click(function(){
		if($("#item_search_text").val() != "")
			search_item($("#item_search_text").val());
	});
});

// load page
function loadpage(page){
	var type = document.getElementById("item_list_select").value;
	var query = "page="+page;
	if(type != "all"){
		query = query + "&type=" + type;
	}
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4 && xmlhttp.status==200){
    		$("table#mainTable").replaceWith(construct_table(page));
		}
	}
	
	xmlhttp.open("GET","retrieveItemPage.php?"+query,true);
	xmlhttp.send();
}

// search item
function search_item(name){
	var type = document.getElementById("item_list_select").value;
	var query = "name="+name;
	if(type != "all"){
		query = query + "&type=" + type;
	}
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4 && xmlhttp.status==200){
    		$("table#mainTable").replaceWith(construct_table(1));
		}
	}
	xmlhttp.open("GET","retrieveItemPage.php?"+query,true);
	xmlhttp.send();
}

// function to construct a table according to the result of query
function construct_table(page){
	var product_per_row=2;
	var total,login;
	var xmldoc,x,xx,i,txt;
	txt = "<table id=\"mainTable\">";
	xmldoc = xmlhttp.responseXML;
	x = xmldoc.getElementsByTagName("total");
	total = x[0].firstChild.nodeValue;
	x = xmldoc.getElementsByTagName("login");
	login = x[0].firstChild.nodeValue;
	
	// if no item is found
	if(total == 0){
		txt = txt + "<tr><td>No item found.</td></tr>";
		lastpage = 1;
	}else{
		// construct a table
		x = xmldoc.getElementsByTagName("item");
		for(i=0;i<x.length;i++){
			if(i % product_per_row == 0)
				txt = txt + "<tr>";
			var price; //test
			txt = txt + "<td class=\"mainTable_row\">"
			        + "<table class=\"each_item_table\" cellspacing=\"5\">"
			        + "<td class=\"item_image\" rowspan=\"2\">"
			        + "<img class=\"icon\" src=\"";
			xx = x[i].getElementsByTagName("image");
			txt = txt + xx[0].firstChild.nodeValue;
			txt = txt + "\" /></td>"
			        + "<td class=\"item_name\" colspan=\"2\">";
			xx = x[i].getElementsByTagName("name");
			txt = txt + xx[0].firstChild.nodeValue;
			txt = txt + "</td>"
			        + "<tr>"
			        + "<td class=\"item_description\" colspan=\"2\">"
			        + "<div class=\"description_div\">";
			xx = x[i].getElementsByTagName("effects");
			txt = txt + xx[0].firstChild.nodeValue;
			txt = txt + "</div></td></tr>"
			        + "<tr>"
			        + "<td class=\"item_price_buy\" colspan=\"2\">"
			        + "<img src=\"../../images/shop/dot.gif\" />";
			xx = x[i].getElementsByTagName("price_buy");
			price = xx[0].firstChild.nodeValue; // test
			txt = txt + price; // test
			txt = txt + "</td>"
			        + "<td class=\"buy_button\">";
			if(login == 1){
				txt = txt + "<input type=\"image\" src=\"../../images/shop/buy.gif\" onclick=\"addToCart(";
				xx = x[i].getElementsByTagName("id");
				txt = txt + xx[0].firstChild.nodeValue;
				txt = txt + ")\" />";
			}
			txt = txt + "</td></tr></table></td>";
			
			if(i % product_per_row == product_per_row - 1)
				txt = txt + "</tr>";
		}
		x = xmldoc.getElementsByTagName("lastpage");
		lastpage = x[0].firstChild.nodeValue;
	}
	txt = txt + "</table>";
	$("div#page_selector").replaceWith(page_selector(page,lastpage));
	return txt;
}

// create page selector
function page_selector(page,lastpage){
	var first,prev,next,last;
	var txt;
	try{
	var prevpage = eval(page);
	var nextpage = eval(page);
	}catch(e){alert("error");}
	if(page > 1){
		prevpage = eval(page) - 1;
	}
    if(page < lastpage){
    	nextpage = eval(page) + 1;
    }
    
    txt = "<div id=\"page_selector\">";
    if(page == 1){ // if the current page is the first page
    	txt = txt + "<span class=\"invalid_page\"> << </span>";
    	txt = txt + "<span class=\"invalid_page\"> Prev </span>";
    }else{
    	txt = txt + "<span class=\"valid_page\" onclick=\"loadpage(1)\"> <u>" +
				"<<</u> </span>";
    	txt = txt + "<span class=\"valid_page\" onclick=\"loadpage(" + prevpage +")\"> <u>" +
    			"Prev</u> </span>";
    }
    txt = txt + "[";
    if(page != 1){
    	txt = txt + "<span class=\"valid_page\" onclick=\"loadpage(" + prevpage + ")\"> <u>" +
    			prevpage + "</u> </span>";
    }
    txt = txt + "<span>" + page + "</span>"
    if(page < lastpage){
    	txt = txt + "<span class=\"valid_page\" onclick=\"loadpage(" + nextpage + ")\"> <u>" +
        		nextpage + "</u> </span>";
    }
    txt = txt + "]";
    if(page == lastpage){ // if the current page is the last page./
    	txt = txt + "<span class=\"invalid_page\"> Next </span>";
    	txt = txt + "<span class=\"invalid_page\"> >> </span>";
    }else{
    	txt = txt + "<span class=\"valid_page\" onclick=\"loadpage(" + nextpage + ")\"> <u>" +
        		"Next</u> </span>";
    	txt = txt + "<span class=\"valid_page\" onclick=\"loadpage()\"> <u>" +
        		">></u> </span>";
    }
    txt = txt + "</div>"
    return txt;
}